import { memo, useEffect } from "react";
import {
  Button,
  Col,
  Drawer,
  Form,
  Input,
  InputNumber,
  message,
  Row,
  Space,
  Spin,
} from "antd";
import { CourseType, propsType } from "../../config";
import TextArea from "antd/es/input/TextArea";
import {
  useFetch_commitCrouse_service,
  useFetch_getCrouseInfo_service,
} from "../../../../service/course";

const Edit = memo((props: propsType) => {
  const [form] = Form.useForm();
  const [edit, editLoading] = useFetch_commitCrouse_service();
  const [getCourse, loading] = useFetch_getCrouseInfo_service();
  useEffect(() => {
    if (props.id) {
      getCourse(props.id).then((res: any) => {
        form.setFieldsValue(res);
      });
    } else {
      form.resetFields();
    }
  }, [props.id]);

  const onSubmitHandler = async () => {
    const values = (await form.validateFields()) as CourseType;
    if (values) {
      edit(props.id as string, values, props.close).catch(() => {
        void message.error("请检查表单！");
      });
    } else {
      void message.error("请检查表单！");
    }
  };

  return (
    <Drawer
      onClose={() => props.close(false)}
      open={props.open}
      title={props.id ? "编辑课程" : "新建课程"}
      width="50vw"
      forceRender
      extra={
        <Space>
          <Button onClick={() => props.close(false)}>取消</Button>
          <Button
            loading={editLoading as boolean}
            onClick={onSubmitHandler}
            type="primary"
          >
            提交
          </Button>
        </Space>
      }
    >
      <Spin spinning={loading as boolean}>
        <Form form={form}>
          <Form.Item
            label="课程名称"
            name="name"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="课程描述"
            name="desc"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <TextArea rows={5} showCount maxLength={200} />
          </Form.Item>
          <Row gutter={20}>
            <Col>
              <Form.Item
                label="限制人数"
                name="limitNumber"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <InputNumber min={0} addonAfter="人" />
              </Form.Item>
            </Col>
            <Col>
              <Form.Item
                label="持续时长"
                name="duration"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <InputNumber min={0} addonAfter="分钟" />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item
            label="适龄人群"
            name="group"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="基础能力"
            name="baseAbility"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="预约信息"
            name="reserveInfo"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <TextArea rows={5} showCount maxLength={200} />
          </Form.Item>
          <Form.Item
            label="退款信息"
            name="refundInfo"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <TextArea rows={5} showCount maxLength={200} />
          </Form.Item>
          <Form.Item label="其他信息" name="otherInfo">
            <TextArea rows={5} showCount maxLength={200} />
          </Form.Item>
        </Form>
      </Spin>
    </Drawer>
  );
});

export default Edit;
